[プレビュー] AWS App Studio がプレビューリリースされたのでセットアップしてアプリ作成とテスト環境への公開までしてみた

[プレビュー] AWS App Studio がプレビューリリースされたのでセットアップしてアプリ作成とテスト環境への公開までしてみた

Clock Icon2024.07.11

いわさです。

2024 年 7 月 10 日 にAWS Summit New York が開催されています。
今年はバンバンアップデートが紹介されていてすごいですね。

https://aws.amazon.com/events/summits/new-york/

そんな中、AWS App Studio という新サービスがパブリックプレビューでリリースされました。
アナウンスはこちら。

https://aws.amazon.com/about-aws/whats-new/2024/07/aws-app-studio-preview/

ちょっと触ってみたのですが、ノーコード・ローコードの類のアプリケーション開発サービスです。
今回はセットアップから適当なアプリの作成までを行ってみたのでその様子をまずは紹介します。

実際に思い通りのアプリを作成したり、何が出来て何が出来ないのかを知るにはもう少しアプリを作ったり壊したりすべきですが、まずはサービスの使い方のイメージが紹介出来ればと思ってます。

AWS App Studio の概要

まず実際に触る前に少し情報を整理しておきます。
App Studio の公式ドキュメントは以下です。

https://docs.aws.amazon.com/appstudio/latest/userguide/welcome.html

このサービスは企業向けのノーコード/ローコードアプリケーションの開発サービスです。
AWS では以前は Amazon Honeycode という類似のサービスがあったのですが、惜しまれつつもベータ版のままサービス終了となってしまいました。

https://dev.classmethod.jp/articles/honeycode-end-the-beta-service/

今回の App Studio を少し触ってみた感想ですが、完全に作り直されてはいますがところどころ Honeycode の思想を感じます。俺にはわかる。
ページ、オートメーション、データという基本コンポーネントが同じだったり、Honeycode に慣れているみなさんにとっては馴染み易いかもしれません。

ただし、Honeycode の時には無かった生成 AI を使ってアプリケーションを作成することが出来るようになっていたり、JavaScript などのコードを部分的に実装することが出来るようになっていたり、様々な AWS サービスと柔軟に連携出来るようになっていたりと、Honeycode で不便だった部分がかなり強化されています。

料金

料金も確認しておきましょう。次が料金ページとなります。

https://aws.amazon.com/app-studio/pricing/

アプリの開発中は無料で、アプリを公開して利用した場合は、ユーザー × 時間で料金が発生します。
ここでいう時間はアプリを使った時間となります。

開発したりテストしたりする分には料金が発生しないので試しやすくて良いですね。

App Studio のセットアップ

では早速使い始めてみましょう。
まずは App Studio のインスタンスをセットアップする必要があります。
そうすると、管理者や開発者は App Studio にサインインしてその中でアプリケーション開発を開始することが出来るようになります。

AWS App Studio は本日時点ではオレゴンリージョンでのみプレビューリリースされています。

F04314FE-E291-4226-8558-66C1EA3D5852_1_105_c

開始するためには、IAM Identity Center のグループと CodeCatalyst のスペースを関連付ける必要があるようです。

079F060D-9009-43E9-AD39-218E6C431E68_1_105_c

オレゴンリージョンで IAM Identity Center をセットアップし、グループを用意しました。

C0BB8598-265E-4721-8551-95D4AA216A02_1_105_c

さらに、事前に Amazon CodeCatalyst のスペースも AWS アカウントに関連付けしておきます。
その上で次のように App Studio のセットアップ項目として指定しました。
ポイントとしては App Studio 内では管理者とビルダーの概念がありまして、その 2 つを IAM Identity Center のグループを利用して割り当てします。今回は同じグループを割り当てましたが、ある一定の規模であればグループは分けて管理したほうが良いでしょう。

266AF644-D6CC-41E9-B442-124280E048E7_1_105_c

セットアップには少し時間がかかります。
私が試した際には、表記の 30 分はかかりませんでしたが、10 ~ 15分程度はかかっていたと思います!

A486FC25-EA7D-4863-A2E8-4F76E4544507_4_5005_c

しばらく待っていると、セットアップ完了したことを示すダイアログが表示されました。

FDE09388-734D-4C58-9D52-30CAA4A00D06

App Studio へアクセスする

「App Studio に移動」ボタンを押してみましょう。
App Studio のサインイン画面が表示されます。

58D83A37-8A3E-44B5-9F4B-A74424870DDD_1_105_c

グループに所属する IAM Identity Center ユーザーを使ってサインインしましょう。

99DE127E-58F9-427F-BD46-88AFDAC6D0C8

はい、App Studio にアクセスすることが出来ました。
これが App Studio かぁ。まぁ、まだよくわからないですね。

3FAD9F05-ED32-4608-9026-49AEF19A00D4_1_105_c

アプリ作成してみる

よくわからないので実際に何かをやってみましょうか。
サイドメニューをみてみると、管理用のメニューとアプリ作成用のメニューに分かれています。
おそらくサインインしたユーザーの所属するグループによって、このあたりの操作可能なメニューの表示がわかれる気がしますね。

63EE55B5-6FF5-4BEB-94E2-88613CF8879E_4_5005_c

アプリ構築用の Build メニューの中を見に行ってみましょう。
Build hub 機能から開発者向けのアプリケーション一覧や、学習コンテンツにアクセス出来るのですが、その中でそのまま新規アプリの作成も出来ます。

右上の「Create app」を押します。

3E9D7CAE-7CA1-4196-9BCF-4C21A02E85BF_1_105_c

アプリを新規作成する際には名称だけ最初決めるのですが、作成モードを新規でイチから自分で作成するか、それとも AI を活用して初期状態のアプリを作成するかを選択することが出来ます。

せっかくなので AI 機能を使ってまず作成してみましょうか。
「Generate an app with AI」を選択します。

FE178042-F900-49CF-8664-567A3E8062EB

このあとデータソースコネクターをオプションで選択出来るのですが、まだ何も設定していないのでここはスキップします。

次の画面では作成したいアプリを AI に指示する画面に遷移します。
自由入力が可能なのですが、右側からサンプルプロンプトを利用することも出来ます。
今回は「Claims Management」を選択します。

F0C31997-1A80-4517-BAEE-D432AC6756B8

そうすると、次のようにサンプルが入力された状態となりました。
このまま送信して対話を進めるとそのままプロジェクトが作成出来るようになります。

B53180E8-456D-41BE-AB48-84D084F4D95C

そこから作成されたアプリケーションが以下です。
複数のページとコンポーネント、あるいはデータがデフォルトで作成された状態となっていました。
このまま利用開始も出来ますし、ここから手動で変更して調整することも可能です。

31E157DC-59F1-4D42-BE70-916E98F4BF42

一方で、AI 機能を使わない場合は新規のからのページからスタートします。
右側にたくさんのコンポーネントが存在しますので、ドラッグ&ドロップでページを作成していくことが出来ます。
レイアウトに少し曲を感じたので、ちょっと慣れが必要かもしれません。(例:フォーム内に配置したボタンの横に別のボタンを置くためには、別のコンポーネントや設定が必要っぽい)

CB64E496-05D5-4F3E-A068-6F58A51CCB63

設置したコンポーネント毎にプロパティの変更を行うことでカスタマイズが可能です。
次はボタンのラベルを変更している様子。もっとも基本的なプロパティカスタマイズです。

6D330124-D77A-4CDD-BB64-B7A5CEB35E58

こちらはボタンのクリックアクションを設定している様子です。
ナビゲーションなどの基本事項はもちろんのこと、なんと今回は JavaScript のコードを実装することも可能です。
Honeycode のころよりも柔軟性が高まっています。

AC965BE6-4DF7-40C3-86A9-F95B9543E79E

プレビュー実行

ページにコンポーネントを適当に配置したので、使ってみます。
どうやって使うんだろうと思っていたら、画面右上に Preview やら Publish やらありますね。
まずはプレビューを使ってみます。

17661D7F-A2C6-4AE2-BF5F-ADFBFF3089B6

これがプレビュー画面です。
公開されたアプリケーションと同じように操作が可能ですが、画面下にコンソールログなどが確認出来ます。
ボタンを押したとか、アクションが実行されたとか、そういった情報が流れていますね。

8FD52408-2D8E-411F-881A-7BC024480B19

こちらは先程 JavaScript で実装したアラートです。ボタン押下時に実行されます。
プレビューでもこのあたりのアクションは問題なく動作するようですね。

DC5D2E37-EB18-4A7A-B740-E7016677B578

コネクターの管理

今回深堀りしていないのですが、データソースをページに紐づける際にはコネクターを選択します。
そしてその選択するコネクターは事前に管理者がビルダーのために用意しておく必要があります。

次の Connectors メニューから管理が可能です。

00C8674F-1AA2-41EB-A52E-909FA33FDA6A_4_5005_c

こちらはコネクターの構成画面です。
Aurora や S3、DynamoDB などの AWS の基本的なデータソースが選択可能です。
それ以外にも「Other AWS services」を選択してみると...

3A3A3DDE-EB25-4726-8F09-E7F9300E75EB

次のように大量の AWS サービスの中から選択が可能です。
実際に使っていないので汎用的な AWS サービスは設定に苦労する可能性もありますが、こちらも Honeycode のころよりも柔軟なデータソースにアクセス出来るようになっていますね。

1FEDF0EC-CD59-477D-905E-00D873DE5F12

オートメーション

こちらも軽く構成画面をみただけで今回はまだ使っていない機能なのですが、オートメーションです。
何かしらのデータ発生などをトリガーに自動化処理を行うことが出来ます。

ページ作成時と同様に、右側にコンポーネントがいくつか用意されておりそれを組み合わせてワークフローを作成するようです。
繰り返しや分岐などの汎用的なコンポーネントの他に、S3 や Amazon SES など一部 AWS サービスの直接統合もどうやら可能なようです。

1C9432FA-9C34-49D8-B7B2-8FEA80C512D8

テスト環境への公開をしてみる

今の時点ではプレビュー機能のみしか使えません。
そこで、デプロイ機能も少し試してみたいと思います。

右上の Publish メニューを押します。
そうすると現在は Development の状態なのですが、Testing 状態に昇格することが出来ます。

2F416DDD-E1BF-4DE5-B6FD-52E03065368B

確定するとテスト版の発行処理が開始されるのですが、この処理がちょっと時間がかかります。
私が試した際には数十分かかりました。

EF40B98E-75C3-48F8-8928-53FCE4AB77FC

しばらく待つ必要があるのですが、テスト版が公開されると次のようなメールを受信します。

3BB8316D-6192-466D-A4B6-7F55815796FC

Publish Center にアクセスしてみると、対象アプリケーションの公開履歴やステータスを確認することが出来ます。
テスト環境への公開完了メール受信後は、次のようにテスト環境へのアクセス用 URL が表示されるようになっていました。
アクセスしてみます。

698178C1-9956-4FE4-A990-242F5BEF9714

テスト環境にアクセスすることが出来ました。
開発環境のプレビューモードとは異なり、デバッグパネルが表示されていませんね。

0282A329-8BD7-42A8-BC64-5CC10C32951C

なお、一点注意があり、テスト環境は 3 時間操作が行われないと一時停止されアクセスできなくなります。
再度アクセスしたい場合にはバージョン履歴機能から復元操作が必要となります。

本番環境への公開をしてみる

さらに、テスト環境から Production 環境へのリクエストをアクセスすることで本番環境への公開も可能です。
可能なのですが、私が試した際にはレビュー中の状態となりました。

03DD60B2-5184-480B-8720-54238EAD2827

Request access
Your request is currently under review. Return to this page with 24 hours for updates.

管理者機能には承認操作が出来る部分がなかったので、AWS によるレビューが発生するのかもしれません。
1 日ほど待ってステータスに変化が無ければ、このあたりの本番環境への公開手順はまた詳しく調べてみたいと思います。

https://docs.aws.amazon.com/appstudio/latest/userguide/application-versioning-environments.html

さいごに

本日は AWS App Studio がプレビューリリースされたのでセットアップしてアプリ作成とテスト環境への公開までしてみました。

アナウンスをみたときには AI を全面に出している感じがしたので、どういう指示をしたらどのようなアプリが作成されるのかもう少し遊んでみたいところです。
また、コネクターやオートメーションなどいくつかの主要な機能もまだ試せていないので基本的な機能をまず一通り使ったアプリを作ってみたいところですね。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.